<template>
  <el-container class="scoreshop-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          积分商城
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button
            v-auth="'shop.admin.app.scoreshop.add'"
            icon="Plus"
            type="primary"
            @click="addRow"
            >新建</el-button
          >
          <el-button
            v-auth="'shop.admin.app.scoreshop.recyclebin'"
            type="danger"
            icon="Delete"
            plain
            @click="openRecyclebin"
            >回收站</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
        <el-table
          height="100%"
          class="sa-table"
          :data="table.data"
          :expand-row-keys="expandRowKeys"
          row-key="id"
          stripe
        >
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column type="expand">
            <template #default="props">
              <el-table class="sa-table sa-expand-table" :data="skuPrices.data" stripe>
                <el-table-column width="48"></el-table-column>
                <el-table-column min-width="80"></el-table-column>
                <el-table-column min-width="440">
                  <template #default="scope">
                    <div class="sa-flex">
                      <sa-preview :url="scope.row.image || props.row.image" size="32"></sa-preview>
                      <div class="sku-text sa-m-l-12">
                        {{ scope.row.goods_sku_text?.join('/') }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="score_price" min-width="200"></el-table-column>
                <el-table-column prop="sales" min-width="100"></el-table-column>
                <el-table-column prop="stock" min-width="100"></el-table-column>
                <el-table-column min-width="120"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
          <el-table-column label="商品信息" min-width="440">
            <template #default="scope">
              <goods-item
                :goods="{
                  image: scope.row.image,
                  title: scope.row.title,
                  subtitle: scope.row.subtitle,
                }"
                mode="scoreShop"
              >
                <template #sku>
                  <el-button
                    v-if="scope.row.is_sku"
                    v-auth="'shop.admin.app.scoreshop.skuprices'"
                    link
                  >
                    <div class="sku" @click.stop="expandRow(scope.row.id)">
                      <span>多规格</span>
                      <el-icon
                        :class="[
                          'expand-arrow sa-m-l-4',
                          expandRowKeys.includes(scope.row.id)
                            ? 'expand-arrow-up'
                            : 'expand-arrow-down',
                        ]"
                      >
                        <ArrowDown />
                      </el-icon>
                    </div>
                  </el-button>
                </template>
              </goods-item>
            </template>
          </el-table-column>
          <el-table-column label="积分现金" min-width="200">
            <template #default="scope">
              <div v-if="scope.row.score_price" class="sa-flex">
                {{ scope.row.score_price.score }}积分
                <div v-if="Number(scope.row.score_price.price)"
                  >+￥{{ scope.row.score_price.price }}</div
                >
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="score_sales" label="销量" min-width="100"></el-table-column>
          <el-table-column prop="score_stock" label="库存" min-width="100"></el-table-column>
          <el-table-column label="操作" min-width="120" fixed="right">
            <template #default="scope">
              <el-button
                v-auth="'shop.admin.app.scoreshop.skus'"
                class="is-link"
                type="primary"
                @click="editRow(scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                width="fit-content"
                confirm-button-text="确认"
                cancel-button-text="取消"
                title="确认删除这条记录?"
                @confirm="deleteRow(scope.row.id)"
              >
                <template #reference>
                  <el-button
                    v-auth="'shop.admin.app.scoreshop.delete'"
                    class="is-link"
                    type="danger"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.app.scoreshop',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../app.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import GoodsItem from '@/app/shop/components/goods-item.vue';
  import ScoreShopEdit from './edit.vue';
  import ScoreShopRecyclebin from './recyclebin.vue';
  import { cloneDeep } from 'lodash';

  const filterParams = reactive({
    tools: {
      keyword: {
        type: 'tinputprepend',
        label: '请输入查询内容',
        field: 'keyword',
        keyword: {
          field: 'title',
          value: '',
        },
        options: [
          {
            label: '商品名称',
            value: 'title',
          },
          {
            label: '商品副标题',
            value: 'subtitle',
          },
        ],
      },
    },
    data: {
      keyword: { field: 'title', value: '' },
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      title: 'like',
      subtitle: 'like',
    });
    const { error, data } = await api.scoreShop.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
      if (expandRowKeys.length > 0) {
        getSkuPrices(expandRowKeys[0]);
      }
    }
    loading.value = false;
  }

  function addRow() {
    useModal(
      ScoreShopEdit,
      {
        title: '兑换规则',
        type: 'add',
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  function editRow(row) {
    useModal(
      ScoreShopEdit,
      {
        title: '兑换规则',
        type: 'edit',
        data: {
          id: row.id,
          title: row.title,
        },
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  async function deleteRow(id) {
    await api.scoreShop.delete(id);
    getData();
  }
  function openRecyclebin() {
    useModal(
      ScoreShopRecyclebin,
      {
        title: '回收站',
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  let expandRowKeys = reactive([]);
  function expandRow(id) {
    if (expandRowKeys.includes(id)) {
      expandRowKeys.length = 0;
    } else {
      expandRowKeys.length = 0;
      expandRowKeys.push(id);
      getSkuPrices(id);
    }
  }

  const skuPrices = reactive({
    data: [],
  });
  async function getSkuPrices(id) {
    const { data } = await api.scoreShop.getSkuPrices(id);
    skuPrices.data = data;
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .scoreshop-view {
    .el-main {
      .sa-table-wrap {
        margin-left: -48px;
        overflow: hidden;
        height: 100%;
        .sku {
          width: fit-content;
          height: 20px;
          line-height: 1;
          display: flex;
          align-items: center;
          padding: 0 8px;
          font-size: 12px;
          color: #fff;
          background: var(--el-color-primary);
          border-radius: 10px;
          cursor: pointer;
        }
      }
      .sa-expand-table {
        :deep() {
          .el-table__header-wrapper {
            display: none;
          }
        }
        .sku-text {
          font-size: 12px;
          color: var(--sa-font);
        }
      }
    }
  }
</style>
